<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="web">
			<!--<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">01</h1>-->
			<!--<img class="ani" swiper-animate-effect="daren" src="img/o_1bnndb1ac1f021kt9n2n1cctm6t3u.png"/>-->
			<div onclick="play(this)" class="music rotatemusic">
				<audio id="bgmusic" src="music/bgm.mp3" hidden autoplay preload loop></audio>
				<img src="img/music227.png"/>
			</div>
			<div class="swiper-container">
					<div class="swiper-wrapper">
						
						<div class="swiper-slide page page1">
							<ul>
								<!--背景圆-->
								<li id="bg1">
									<div class="bg1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background.png"/>
									</div>
								</li>
								<!--背景线-->
								<li id="bg2">
									<div class="bg2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background2.png"/>
									</div>
								</li>
								<li id="logo">
									<div class="logo">
										<p class="ani" swiper-animate-effect="slideInDown" swiper-animate-duration="1.5s"> L O G O </p>
									</div>
								</li>
								<!--框-->
								<li id="kuang">
									<div class="kuang ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/page1-kuang.png"/>
									</div>
								</li>
								<!--框里的字1-->
								<li id="kuang-text1">
									<div class="kuang-text1">
										<p class="ani"  swiper-animate-effect="slideInLeft" swiper-animate-duration="1.5s">T H E T A B L E T</p>
									</div>
								</li>
								<!--框里的字2-->
								<li id="kuang-text2">
									<div class="kuang-text2"> 
										<p class="ani"  swiper-animate-effect="slideInRight" swiper-animate-duration="1.5s">平板电脑</p>
									</div>
								</li>
								<!--框里的字3-->
								<li id="kuang-text3">
									<div class="kuang-text3-box ani"  swiper-animate-effect="kuang-text3-a" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
										<div class="kuang-text3">
											<p>高端金属外壳</p>
										</div>
										<div class="kuang-text3">
											<p>智能运行系统</p>
										</div>
										<div class="clear"></div>
									</div>
								</li>
								<!--框里的字4-->
								<li id="kuang-text4">
									<div class="kuang-text4">
										<p class="ani" swiper-animate-effect="kuang-text4-a" swiper-animate-duration="1.5s">M I N I C O M P U T E R</p>
									</div>
								</li>
								<!--平板-->
								<li id="page1-pic0">
									<div class="page1-pic0 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/page1-pic0.png"/>
									</div>
								</li>
								<!--平板图片1-->
								<li id="page1-pic1">
									<div class="page1-pic1 ani" swiper-animate-effect="kuang-text3-a" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
										<img src="img/page1-pic1.png"/>
									</div>
								</li>
								<!--平板图片2-->
								<li id="page1-pic2">
									<div class="page1-pic2 ani" swiper-animate-effect="page1-pic2-a" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
										<img src="img/page1-pic2.png"/>
									</div>
								</li>
								<!--平板图片6-->
								<li id="page1-pic6">
									<div class="page1-pic6 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
										<img src="img/page1-pic6.png"/>
									</div>
								</li>
								<!--平板图片3-->
								<li id="page1-pic3">
									<div class="page1-pic3 ani" swiper-animate-effect="page1-pic2-a" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
										<img src="img/page1-pic3.png"/>
									</div>
								</li>
								<!--平板图片yun-->
								<li id="page1-pic4">
									<div class="page1-pic4 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.3s">
										<img src="img/page1-pic4.png"/>
									</div>
								</li>
								<!--平板图片5-->
								<li id="page1-pic5">
									<div class="page1-pic5 ani" swiper-animate-effect="page1-pic5-a" swiper-animate-duration="1.5s">
										<img src="img/page1-pic5.png"/>
									</div>
								</li>
								<!--平板图片7-->
								<li id="page1-pic7">
									<div class="page1-pic7 ani" swiper-animate-effect="kuang-text4-a" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s">
										<img src="img/page1-pic7.png"/>
									</div>
								</li>
								<!--page1-nav-->
								<li id="page1-nav">
									<div class="page1-nav ani" swiper-animate-effect="page1-nav-a" swiper-animate-duration="0.7s" swiper-animate-delay="0.8s">
										<div class="page1-nav1">
											<div class="page1-nav1-box">
												<div class="page1-nav1-pic">
													<img src=""/>
												</div>
												<p>血压</p>
											</div>
										</div>
										<div class="page1-nav1">
											<div class="page1-nav1-box">
												<div class="page1-nav1-pic">
													<img src=""/>
												</div>
												<p>健康</p>
											</div>
										</div>
										<div class="page1-nav1">
											<div class="page1-nav1-box">
												<div class="page1-nav1-pic">
													<img src=""/>
												</div>
												<p>心率</p>
											</div>
										</div>
										<div class="page1-nav1">
											<div class="page1-nav1-box">
												<div class="page1-nav1-pic">
													<img src=""/>
												</div>
												<p>血压</p>
											</div>
										</div>
									</div>
								</li>
								<!--下一页-->
								<li id="page-next">
									<div class="page-next ani" swiper-animate-effect="page-next-a" swiper-animate-duration="1s"></div>
								</li>
							</ul>
							
						</div>
						
						<div class="swiper-slide page page2">
							<ul>
								<!--背景圆-->
								<li id="bg1">
									<div class="bg1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background.png"/>
									</div>
								</li>
								<!--背景线-->
								<li id="bg2">
									<div class="bg2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background2.png"/>
									</div>
								</li>
								<!--大框-->
								<li id="page2-box">
									<div class="page2-box ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s"></div>
								</li>
								<!--顶部白色-->
								<li id="page2-title-box">
									<div class="page2-title-box ani" swiper-animate-effect="slideInDown" swiper-animate-duration="1.1s"></div>
								</li>
								<!--顶部白色字1-->
								<li id="page2-title-1">
									<div class="page2-title-1">
										<p class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="1.2s">产品展示</p>
									</div>
								</li>
								<!--顶部白色字2-->
								<li id="page2-title-2">
									<div class="page2-title-2">
										<p class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="1.2s">Y U Y U E T I Y A N A</p>
									</div>
								</li>
								<!--横线1-->
								<li id="baixian1">
									<div class="page-line ani" swiper-animate-effect="hengxian" swiper-animate-duration="0.8s"></div>
								</li>
								<!--横线2-->
								<li id="baixian2">
									<div class="page-line ani" swiper-animate-effect="hengxian" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s"></div>
								</li>
								<!--page2图片-->
								<li id="page2-pic-box">
									<div class="page2-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" >
										<img src="img/page2-pic1.png"/>
									</div>
									<div class="page2-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" >
										<img src="img/page2-pic2.png"/>
									</div>
									<div class="page2-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" >
										<img src="img/page2-pic3.png"/>
									</div>
									<div class="page2-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" >
										<img src="img/page2-pic4.png"/>
									</div>
									<div class="page2-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" >
										<img src="img/page2-pic5.png"/>
									</div>
									<div class="page2-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" >
										<img src="img/page2-pic6.png"/>
									</div>
									<div class="clear"></div>
								</li>
								<!--下一页-->
								<li id="page-next">
									<div class="page-next ani" swiper-animate-effect="page-next-a" swiper-animate-duration="1s"></div>
								</li>
							</ul>
							
						</div>
						
						<div class="swiper-slide page page3">
							<ul>
								<!--背景圆-->
								<li id="bg1">
									<div class="bg1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background.png"/>
									</div>
								</li>
								<!--背景线-->
								<li id="bg2">
									<div class="bg2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background2.png"/>
									</div>
								</li>
								<!--大框-->
								<li id="page2-box">
									<div class="page2-box ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s"></div>
								</li>
								<!--顶部白色-->
								<li id="page2-title-box">
									<div class="page2-title-box ani" swiper-animate-effect="slideInDown" swiper-animate-duration="1.1s"></div>
								</li>
								<!--顶部白色字1-->
								<li id="page2-title-1">
									<div class="page2-title-1">
										<p class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="1.2s">产品详情</p>
									</div>
								</li>
								<!--顶部白色字2-->
								<li id="page2-title-2">
									<div class="page2-title-2">
										<p class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="1.2s">Y U Y U E T I Y A N A</p>
									</div>
								</li>
								<!--横线1-->
								<li id="baixian1">
									<div class="page-line ani" swiper-animate-effect="hengxian" swiper-animate-duration="0.8s"></div>
								</li>
								<!--横线2-->
								<li id="baixian2">
									<div class="page-line ani" swiper-animate-effect="hengxian" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s"></div>
								</li>
								<!--图片-->
								<li id="page3-pic1">
									<div class="page3-pic1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
										<img src="img/page3-pic1.png"/>
									</div>
								</li>
								<!--文字介绍-->
								<li id="page3-text">
									<div class="page3-text ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
										君雅企业形象设计有限公司是易企秀官方秀客服务商获得易企秀模板达人荣誉称号。提供专业高端场景定制设计服务。项目发布/节假日宣传/公司培训/招商/招聘/旅游。
									</div>
								</li>
								<!--底部白色-->
								<li id="page3-white">
									<div class="page3-white ani"  swiper-animate-effect="slideInRight" swiper-animate-duration="1.5s"></div>
								</li>
								<!--底部白色字-->
								<li id="page3-white-text">
									<div class="page3-white-text ani"  swiper-animate-effect="slideInLeft" swiper-animate-duration="1s">
										纵 情 燃 烧 &nbsp; 绽 放 新 我
									</div>
								</li>
								<!--下一页-->
								<li id="page-next">
									<div class="page-next ani" swiper-animate-effect="page-next-a" swiper-animate-duration="1s"></div>
								</li>
							</ul>
						</div>
					
						<div class="swiper-slide page page4">
							<ul>
								<!--背景圆-->
								<li id="bg1">
									<div class="bg1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background.png"/>
									</div>
								</li>
								<!--背景线-->
								<li id="bg2">
									<div class="bg2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
										<img src="img/background2.png"/>
									</div>
								</li>
								<!--白色-->
								<li class="page4-white1">
									<div class="page4-white ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s"></div>
								</li>
								<li class="page4-white1">
									<div class="page4-white ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s"></div>
								</li>
								<!--title-->
								<li id="page4-title">
									<div class="page4-title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
										联 系 我 们
									</div>
								</li>
								<!--正方体-->
								<li id="page4-square">
									<div class="page4-square ani" swiper-animate-effect="xialuo" swiper-animate-duration="2s" swiper-animate-delay="0.5s"></div>
								</li>
								<!--线-->
								<li id="page4-xian">
									<div class="page4-xian ani" swiper-animate-effect="xialuoxian" swiper-animate-duration="2s" swiper-animate-delay="0.5s"></div>
								</li>
								<!--左边-->
								<!--姓名-->
								<li id="page4-left1" class="page-left">
									<div class="page4-left1 ani"  swiper-animate-effect="youhua" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
										公 司 名 称
									</div>
								</li>
								<!--性别-->
								<li id="page4-left2" class="page-left">
									<div class="page4-left1 ani"  swiper-animate-effect="youhua" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
										电 话
									</div>
								</li>
								<!--出生年月-->
								<li id="page4-left3" class="page-left">
									<div class="page4-left1 ani"  swiper-animate-effect="youhua" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
										邮 箱
									</div>
								</li>
								<!--性别-->
								<li id="page4-left4" class="page-left">
									<div class="page4-left1 ani"  swiper-animate-effect="youhua" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
										地 址
									</div>
								</li>
								<!--性别-->
								<li id="page4-left5" class="page-left">
									<div class="page4-left1 ani"  swiper-animate-effect="youhua" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
										介 绍
									</div>
								</li>
								<!--性别-->
								<li id="page4-left6" class="page-left">
									<div class="page4-left1 ani"  swiper-animate-effect="youhua" swiper-animate-duration="1s" swiper-animate-delay="1.7s">
										二 维 码
									</div>
								</li>
								<!--右边-->
								<li id="page4-right1" class="page-right">
									<div class="page4-right1 ani" swiper-animate-effect="zuohua" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
										* *
									</div>
								</li>
								<li id="page4-right2" class="page-right">
									<div class="page4-right1 ani" swiper-animate-effect="zuohua" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
										*
									</div>
								</li>
								<li id="page4-right3" class="page-right">
									<div class="page4-right1 ani" swiper-animate-effect="zuohua" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
										* *
									</div>
								</li>
								<li id="page4-right4" class="page-right">
									<div class="page4-right1 ani" swiper-animate-effect="zuohua" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
										*
									</div>
								</li>
								<li id="page4-right5" class="page-right">
									<div class="page4-right1 ani" swiper-animate-effect="zuohua" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
										* *
									</div>
								</li>
								<li id="page4-right6" class="page-right">
									<div class="page4-right1 ani" swiper-animate-effect="zuohua" swiper-animate-duration="1s" swiper-animate-delay="1.7s">
										* * * * *
									</div>
								</li>
								<!--圆-->
								<li id="page4-yuan1" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="2s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<li id="page4-yuan2" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="2.2s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<li id="page4-yuan3" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<li id="page4-yuan4" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="2.6s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<li id="page4-yuan5" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<li id="page4-yuan6" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="3s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<li id="page4-yuan7" class="page4-yuans">
									<div class="page4-yuan ani"  swiper-animate-effect="fangda" swiper-animate-duration="1s" swiper-animate-delay="3.2s">
										<img src="img/page4-yuan.png"/>
									</div>
								</li>
								<!--图片-->
								<li id="page4-pic1" class="page4-pic">
									<div class="page4-pic1 ani" swiper-animate-effect="flicker-in-1" swiper-animate-duration="1s" swiper-animate-delay="3.8s">
										<img src="img/page4-pic.jpg"/>
									</div>
								</li>
								<li id="page4-pic2" class="page4-pic">
									<div class="page4-pic1 ani" swiper-animate-effect="flicker-in-1" swiper-animate-duration="1s" swiper-animate-delay="3.8s">
										<img src="img/page4-pic.jpg"/>
									</div>
								</li>
							</ul>
						</div>
					</div>
				
			</div>
			
		</div>
		<script type="text/javascript">
			var mySwiper = new Swiper('.swiper-container', {
//				autoplay: 5000,//可选选项，自动滑动
//				effect : 'coverflow',				
//				loop : true,
//				touchAngle : 10,
				touchRatio : 0.5,
				iOSEdgeSwipeDetection : true,
				direction: "vertical",
				onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				  }, 
				  onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				  } 
//				followFinger : false,
			})
		</script>
	</body>
</html>
